<template>
	<view>
		<view class="head">
			<text class="title">定期理财</text>
			<text style="font-size: 24rpx;">超500,000+人购买</text>
		</view>
		<view class="txt">
			甄选金融机构优质产品，收益稳健、期限丰富。可挑选多款不同期限的产品，省心投资、安心持有。
		</view>
		<view class="card">
			<view class="card_left">
				<view class="">
					<text style="font-size: 30rpx;font-weight: bold;">券商资管 <text style="color: #dddddd;margin: 0 10rpx;">|</text> 天风天泽76天</text>
				</view>
				<view style="margin-top: 30rpx;margin-bottom: 20rpx;font-weight: bold;">
					<text style="font-size: 40rpx;color: red;">4.05 <text style="font-size: 26rpx;">%</text></text>
					<text style="font-size: 32rpx; margin-left: 115rpx;">76天</text>
				</view>
				<view style="color: #cccccc;">
					<text>业绩比较基准</text>
					<text style="margin-left: 60rpx;">50000元起购</text>
				</view>
				<view style="margin-top: 22rpx;">
					<text class="inline">限时抢购</text>
					<text class="inline" style="margin-left: 20rpx;">无需开户</text>
				</view>
			</view>
			<view class="card_right">
				<view class="go_shop">
					去抢购
				</view>
			</view>
			<view class="right_top">
				明星产品
			</view>
		</view>
		<view style="display: flex;margin-top: 40rpx;">
			<block v-for="item in range" :key="item.id">
				<view v-if="item.state" class="state blue">{{item.text}}</view>
				<view v-else class="state" @click="changeState(item.id)">{{item.text}}</view>
			</block>
		</view>
		<view class="main">
			<block v-for="item in goods" :key="item.id">
				<view v-if="item.pd==show" class="main_goods" @click="see">
					<view>
						<text style="font-size: 30rpx;font-weight: bold;">{{item.one}} <text style="color: #dddddd;margin: 0 10rpx;">|</text> {{item.two}}</text>
						<text v-for="(a,b) in item.label" :key="b" class="inline" style="margin-left: 20rpx;">{{a}}</text>
					</view>
					<view style="margin-top: 30rpx;margin-bottom: 20rpx;font-weight: bold;">
						<text style="font-size: 40rpx;color: red;">{{item.three}} <text style="font-size: 26rpx;">%</text></text>
						<text style="font-size: 32rpx; margin-left: 115rpx;">{{item.four}}</text>
					</view>
					<view style="color: #cccccc;">
						<text>{{item.five}}</text>
						<text style="margin-left: 60rpx;">{{item.six}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range:[
					{id:1,text:'全部',state:true,pd:'all'},
					{id:2,text:'60天内',state:false,pd:'two'},
					{id:3,text:'60天-1年',state:false,pd:'three'},
					{id:4,text:'1年以上',state:false,pd:'four'},
				],
				goods:[
					{id:1,one:'券商资管',two:'齐鲁锦泉28天',label:['限时抢购'],three:'3.05',four:'28天',five:'业绩比较基准',six:'券商出品 | 低风险',pd:'all'},
					{id:2,one:'券商资管',two:'天风天泽76天',label:['限时抢购','无需开户'],three:'4.05',four:'76天',five:'业绩比较基准',six:'券商出品 | 低风险',pd:'all'},
					{id:3,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'6.00',four:'28天',five:'业绩比较基准',six:'先开户，再购买',pd:'all'},
					{id:4,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'all'},
					{id:5,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'two'},
					{id:6,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'two'},
					{id:7,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'two'},
					{id:8,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'two'},
					{id:9,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:10,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:11,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:12,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:13,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:14,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:15,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:16,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'three'},
					{id:17,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'four'},
					{id:18,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'four'},
					{id:19,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'four'},
					{id:20,one:'报价回购',two:'中信建投固收宝',label:['限时抢购','无需开户'],three:'3.35',four:'14天',five:'业绩比较基准',six:'先开户，再购买',pd:'four'},
				],
				show:'all'
			}
		},
		methods: {
			changeState(id){
				this.range.forEach(item=>{
					if(item.id==id){
						item.state=true
						this.show=item.pd
					}else{
						item.state=false
					}
				})
			},
			see(){
				uni.navigateTo({
				    url: '/pages/regular/details',
				})
			}
		}
	}
</script>

<style>
page{
	padding: 0 24rpx;
	box-sizing: border-box;
	background-color: white;
}
.head{
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.title{
	font-size: 44rpx;
	font-weight: bold;
}
.txt{
	font-size: 30rpx;
	color: #666666;
	margin-top: 40rpx;
}
.card{
	width: 100%;
	padding: 30rpx;
	margin-top: 38rpx;
	box-shadow: 0 0 5rpx 3rpx #dddddd;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
}
.inline{
	display: inline-block;
	width: 100rpx;
	height: 30rpx;
	font-size: 20rpx;
	text-align: center;
	line-height: 30rpx;
	background-color: #F9F2E8;
	color: #C79141;
}
.go_shop{
	width: 164rpx;
	height: 62rpx;
	background-color: #007AFF;
	border-radius: 30rpx;
	line-height: 62rpx;
	text-align: center;
	color: white;
	font-size: 32rpx;
	top: 80rpx;
	background-image: url(../../static/regular/people.png);
	background-repeat: no-repeat;
	padding-left: 20rpx;
	background-position: 10rpx 15rpx;
	position: relative;
	left: 110rpx;
}
.card_left{
	width: 70%;
}
.right_top{
	color: white;
	width: 134rpx;
	height: 44rpx;
	background-color: #f85656;
	border-radius: 0 12rpx 0 12rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 44rpx;
	position: relative;
	top: -30rpx;
	right: -30rpx;
}
.state{
	padding: 10rpx 25rpx;
	border-radius: 8rpx;
}
.blue{
	background-color: #007AFF;
	color: white;
}
.mian{
	width: 100%;
	padding: 24rpx;
	box-shadow: 0 0 5rpx 3rpx #dddddd;
	margin-top: 10rpx;
}
.main_goods{
	width: 100%;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #dddddd;
	margin-top: 24rpx;
}
</style>
